<template>
	<el-card
		class="box-card"
		shadow="hover"
	>
		<div>
			<div style="text-align:center;">
				<h2>企业信息管理后台</h2>
			</div>
			<el-form
				:model="form"
				ref="form"
				:rules="rules"
				style="padding: 20px;"
				@submit-native-prevent="login"
			>
				<el-form-item prop="username">
					<el-input
						placeholder="请输入用户名或邮箱"
						v-model="form.username"
						clearable
						prefix-icon="el-icon-user-solid"
					>
					</el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input
						placeholder="请输入密码"
						v-model="form.password"
						show-password
						prefix-icon="el-icon-lock"
					></el-input>
				</el-form-item>
				<el-form-item prop="inputCode">
					<el-row>
						<el-col :span="16">
							<el-input
								placeholder="请输入验证码"
								v-model="form.inputCode"
							></el-input>
						</el-col>
						<el-col :span="6">
							<img
								width="105px"
								height="40px"
								style="border-radius:4px;cursor:pointer;"
								@click="getImgCode"
								src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
								alt="图片验证码"
							>
						</el-col>
					</el-row>
				</el-form-item>
				<el-form-item>
					<el-row>
						<el-col
							:span="17"
							style="padding-left: 10px;"
						>
							<el-checkbox v-model="form.rememberMe">记住我</el-checkbox>
						</el-col>
						<el-col :span="6">
							<el-button type="text">短信验证登录</el-button>
						</el-col>
					</el-row>
				</el-form-item>
				<el-form-item>
					<el-row>
						<el-col :span="24">
							<el-button
								type="info"
								style="width:100%;"
								@click="login('form')"
							>登录</el-button>
						</el-col>
					</el-row>
				</el-form-item>
				<el-form-item>
					<el-row>
						<el-col :span="24">
							<el-button type="text" @click.native="toSignup">没有账号？前往注册</el-button>
						</el-col>
					</el-row>
				</el-form-item>
			</el-form>
		</div>
	</el-card>
</template>

<script>
export default {
	data() {
		return {
			form: {
				username: "",
				password: "",
				rememberMe: false,
				inputCode: "",
				vCode: "4D6Fzi",
			},
			rules: {
				username: [
					{ required: true, message: "请输入用户名", trigger: "blur" },
				],
				password: [{ required: true, message: "请输入密码", trigger: "blur" }],
				inputCode: [
					{ required: true, message: "请输入验证码", trigger: "blur" },
					{ min: 6, max: 6, message: "验证码格式错误", trigger: "blur" },
				],
			},
		};
	},
	methods: {
		login(formData) {
			this.$refs[formData].validate((valid) => {
				if (valid) {
					console.log(this.form);
					this.$router.push("/");
				} else {
					console.log("error submit!!");
					return false;
				}
			});
		},
		toSignup() {
			this.$router.push('/signup')
		},
		getImgCode() {
			// 请求接口获取图片验证码
			console.log("获取图片验证码");
		},
	},
};
</script>

<style>
.box-card {
	width: 400px;
	margin: auto;
	margin-top: 120px;
	border-radius: 10px;
}
</style>